// components/week-calendar/week-calendar.ts
import dayjs, { Dayjs } from "dayjs"
import {get} from "@utils/http"
import { iteratorSymbol, observe } from "mobx-miniprogram/lib/internal"
import { FormEvent } from "miniprogram/@types/Event"
import { ActivityType } from "miniprogram/@types/Activity"
import { CalendarNodeType } from "miniprogram/@types/Calendar"
Component({

  /**
   * 组件的属性列表
   */
  properties: {
    location:{},
    mode:"",
  }as {location:{selectRegion:string,selectSchool:string},mode:string},
  /**
   * 组件的属性监听
   */
  observers:{
    "location.**":function(){
      this.init()
    }
  },
  /**
   * 组件的初始数据
   */
  data: {
    time:null,
    month:dayjs().format("M月"),
    monthCalendar:[] as CalendarNodeType[],
    activityDay:null,
    week:["日","一","二","三","四","五","六"],
    activityList:[],
    activityTime:""
  },

  /**
   * 组件的方法列表
   */
  methods: {
    getMonthActivity:async function(){
      const time=this.data.time
      const res=await get("/activity",{
        campus:this.properties.location.selectRegion,
        school:this.properties.location.selectSchool,
        start:time.startOf("month").format("YYYY-MM-DD HH:mm:ss"),
        end:time.endOf("month").format("YYYY-MM-DD HH:mm:ss"),
        flag:0,
        verified:1
      })
      this.setData({
        monthActivityList:res
      })
    },
    initCalendar:function(){
      const {time}=this.data
      const start=time.startOf("month").startOf("week")
      const end=time.endOf("month").endOf("week")
      let week=[]
      const month:CalendarNodeType[][]=[]
      for(let i=0;i<=end.diff(start,"day");i++){
        const day=start.add(i,"day")
        const res={
          day:day.get("date"),
          inMonth:day.isBefore(time.endOf("month"))&&day.isAfter(time.startOf("month").subtract(1,"day")),
          today:day.isSame(dayjs(),"day"),
          active:false,
          month:day.get("month"),
          year:day.get("year"),
          yellow:false,
          blue:false,
          primary:false,
          activityList:[]
        }
        week.push(res)
        if((i+1)%7==0){
          month.push(week)
          week=[]
        }
      }
      this.data.monthActivityList.forEach((activity:ActivityType) => {
        const [row,column]=this.getDayPositon(activity.start)
        const color=activity.type==="娱乐"?"blue":activity.type==="交友"?"yellow":"primary"
        month[row][column][color]=true
        month[row][column].activityList.push(activity)
      });
      this.setData({
        monthCalendar:month
      })
    },
    getDayPositon(date:number|Dayjs){
      const monthStart=dayjs(date).startOf("month").startOf("week")
      const start=dayjs(date)
      const row=Math.floor(start.diff(monthStart,"day")/7)
      const column=start.day()
      return [row,column]
    },
    initActivityDay(date:Dayjs){
      const {monthCalendar}=this.data
      const [row,column]=this.getDayPositon(date)
      const {activityList}=monthCalendar[row][column]
      this.setData({
        activityList,
        activityTime:date.format("M月D日"),
        monthCalendar:monthCalendar.map((weekCalendar:CalendarNodeType[])=>{
          return weekCalendar.map(item=>{
            item.active=date.year()===item.year&&date.month()===item.month&&date.date()===item.day
            return item
          })
        })
      })
    },
    init:async function(){
      this.setData({
        time:this.data.time||dayjs()
      })
      await this.getMonthActivity()
      this.initCalendar()
      this.initActivityDay(this.data.activityDay||dayjs())
    },
    changeMonth:async function(e){
      const i=e.currentTarget.dataset.i
      const time=this.data.time.add(i,"month")
      this.setData({
        time,
        month:time.format("M月")
      })
      await this.getMonthActivity()
      this.initCalendar()
    },
    changeDay:async function(e:FormEvent<{item:any}>){
      const {day,month,year}=e.currentTarget.dataset.item
      this.initActivityDay(dayjs().year(year).month(month).date(day))
    },
  },
})